<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .board {
            background: #f4a261;
            border: 3px solid #8b4513;
        }
        .cell {
            width: 20px;
            height: 20px;
            border: 1px solid #8b4513;
            transition: background-color 0.2s;
        }
        .cell:hover {
            background-color: rgba(255,255,255,0.2);
        }
        .black-piece {
            background: radial-gradient(circle, #2c3e50, #000);
            border: 2px solid #34495e;
        }
        .white-piece {
            background: radial-gradient(circle, #ecf0f1, #bdc3c7);
            border: 2px solid #95a5a6;
        }
        .ios-shadow {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部状态栏 -->
    <div class="bg-white/10 backdrop-blur-md text-white px-4 py-2 flex justify-between items-center">
        <div class="flex items-center space-x-2" onclick="location.href='index.html'">
            <i class="fas fa-arrow-left"></i>
            <span class="text-sm">返回</span>
        </div>
        <div class="text-sm font-medium">五子棋游戏</div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-redo text-sm" onclick="resetGame()"></i>
        </div>
    </div>

    <!-- 游戏信息栏 -->
    <div class="px-4 py-3">
        <div class="bg-white/95 backdrop-blur-md rounded-xl p-4 ios-shadow">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-3">
                    <div class="w-6 h-6 rounded-full black-piece"></div>
                    <span class="text-gray-800 font-medium">黑棋</span>
                </div>
                <div class="text-lg font-bold text-gray-800" id="currentPlayer">当前回合</div>
                <div class="flex items-center space-x-3">
                    <span class="text-gray-800 font-medium">白棋</span>
                    <div class="w-6 h-6 rounded-full white-piece"></div>
                </div>
            </div>
            <div class="mt-3 text-center">
                <div class="text-sm text-gray-600" id="gameStatus">黑棋先手，请落子</div>
            </div>
        </div>
    </div>

    <!-- 棋盘区域 -->
    <div class="px-4 pb-20">
        <div class="bg-white/95 backdrop-blur-md rounded-xl p-4 ios-shadow">
            <div class="board rounded-lg p-2 mx-auto" style="width: fit-content;">
                <div id="gameBoard" class="grid gap-0" style="grid-template-columns: repeat(15, 1fr); width: 300px; height: 300px;">
                    <!-- 棋盘格子将通过JavaScript生成 -->
                </div>
            </div>
            
            <!-- 游戏控制按钮 -->
            <div class="flex justify-center space-x-4 mt-4">
                <button onclick="resetGame()" class="bg-gradient-to-r from-red-500 to-red-600 text-white px-6 py-2 rounded-full font-medium ios-shadow">
                    <i class="fas fa-redo mr-2"></i>重新开始
                </button>
                <button onclick="undoMove()" class="bg-gradient-to-r from-gray-500 to-gray-600 text-white px-6 py-2 rounded-full font-medium ios-shadow">
                    <i class="fas fa-undo mr-2"></i>悔棋
                </button>
            </div>
        </div>
    </div>

    <!-- 胜利弹窗 -->
    <div id="winModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden flex items-center justify-center z-50">
        <div class="bg-white rounded-2xl p-8 mx-4 text-center ios-shadow">
            <div class="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center">
                <i class="fas fa-trophy text-3xl text-white"></i>
            </div>
            <h2 class="text-2xl font-bold text-gray-800 mb-2" id="winnerText">游戏结束</h2>
            <p class="text-gray-600 mb-6">恭喜获胜！</p>
            <div class="flex space-x-3">
                <button onclick="resetGame()" class="flex-1 bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 rounded-xl font-medium">
                    再来一局
                </button>
                <button onclick="location.href='index.html'" class="flex-1 bg-gray-200 text-gray-800 py-3 rounded-xl font-medium">
                    返回首页
                </button>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-gray-200/50">
        <div class="flex justify-around py-3">
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='index.html'">
                <i class="fas fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </div>
            <div class="flex flex-col items-center text-blue-600">
                <i class="fas fa-gamepad text-xl mb-1"></i>
                <span class="text-xs">游戏</span>
            </div>
            <div class="flex flex-col items-center text-gray-400" onclick="location.href='profile.html'">
                <i class="fas fa-user text-xl mb-1"></i>
                <span class="text-xs">我的</span>
            </div>
        </div>
    </div>

    <script>
        let board = Array(15).fill().map(() => Array(15).fill(0));
        let currentPlayer = 1; // 1为黑棋，2为白棋
        let gameOver = false;
        let moveHistory = [];

        // 初始化棋盘
        function initBoard() {
            const gameBoard = document.getElementById('gameBoard');
            gameBoard.innerHTML = '';
            
            for (let i = 0; i < 15; i++) {
                for (let j = 0; j < 15; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell cursor-pointer flex items-center justify-center';
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.onclick = () => makeMove(i, j);
                    gameBoard.appendChild(cell);
                }
            }
            updateGameStatus();
        }

        // 落子
        function makeMove(row, col) {
            if (gameOver || board[row][col] !== 0) return;
            
            board[row][col] = currentPlayer;
            moveHistory.push({row, col, player: currentPlayer});
            
            const cell = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
            const piece = document.createElement('div');
            piece.className = `w-4 h-4 rounded-full ${currentPlayer === 1 ? 'black-piece' : 'white-piece'}`;
            cell.appendChild(piece);
            
            if (checkWin(row, col)) {
                gameOver = true;
                showWinModal();
                return;
            }
            
            currentPlayer = currentPlayer === 1 ? 2 : 1;
            updateGameStatus();
        }

        // 检查胜利
        function checkWin(row, col) {
            const directions = [
                [0, 1], [1, 0], [1, 1], [1, -1]
            ];
            
            for (let [dx, dy] of directions) {
                let count = 1;
                
                // 正方向
                for (let i = 1; i < 5; i++) {
                    const newRow = row + dx * i;
                    const newCol = col + dy * i;
                    if (newRow < 0 || newRow >= 15 || newCol < 0 || newCol >= 15) break;
                    if (board[newRow][newCol] !== currentPlayer) break;
                    count++;
                }
                
                // 反方向
                for (let i = 1; i < 5; i++) {
                    const newRow = row - dx * i;
                    const newCol = col - dy * i;
                    if (newRow < 0 || newRow >= 15 || newCol < 0 || newCol >= 15) break;
                    if (board[newRow][newCol] !== currentPlayer) break;
                    count++;
                }
                
                if (count >= 5) return true;
            }
            return false;
        }

        // 更新游戏状态
        function updateGameStatus() {
            const statusElement = document.getElementById('gameStatus');
            const currentPlayerElement = document.getElementById('currentPlayer');
            
            if (gameOver) {
                statusElement.textContent = '游戏结束';
                currentPlayerElement.textContent = '游戏结束';
            } else {
                const playerName = currentPlayer === 1 ? '黑棋' : '白棋';
                statusElement.textContent = `${playerName}回合，请落子`;
                currentPlayerElement.textContent = `${playerName}回合`;
            }
        }

        // 显示胜利弹窗
        function showWinModal() {
            const modal = document.getElementById('winModal');
            const winnerText = document.getElementById('winnerText');
            const winner = currentPlayer === 1 ? '黑棋' : '白棋';
            winnerText.textContent = `${winner}获胜！`;
            modal.classList.remove('hidden');
        }

        // 重新开始游戏
        function resetGame() {
            board = Array(15).fill().map(() => Array(15).fill(0));
            currentPlayer = 1;
            gameOver = false;
            moveHistory = [];
            document.getElementById('winModal').classList.add('hidden');
            initBoard();
        }

        // 悔棋
        function undoMove() {
            if (moveHistory.length === 0 || gameOver) return;
            
            const lastMove = moveHistory.pop();
            board[lastMove.row][lastMove.col] = 0;
            
            const cell = document.querySelector(`[data-row="${lastMove.row}"][data-col="${lastMove.col}"]`);
            cell.innerHTML = '';
            
            currentPlayer = lastMove.player;
            updateGameStatus();
        }

        // 初始化游戏
        initBoard();
    </script>
</body>
</html>